@import 'mixin.scss';

/**
 * 车辆出入样式文件
 * author ly
 */

.page-vehicle-cleaning{
	
	@include body-parts;
	@include card-title;
	.params{
		height: 40px;
		li{
			min-width: 93px;
			font-size: 13px;
			color:#8F8F8F;
		}
		li.item{
			font-size: 14px;
			cursor: pointer;
		}
		li.active{
			color:#fff;
		}
		.state{
			min-width: 40%;
		}
	}

	.left-box{
		.detail-section{
			width: 100%;
			height: calc(100% - 70px);
			overflow: hidden;
			.wrapper{
				width: 200%;
				height: 100%;
				display: flex;
				transition: transform 0.3s;
				position:relative;
			}
			.show-params{
				transform: translateX(-50%);
			}
			.vehicle-list,
			.run-param-order{
				width: 50%;
				height: 100%;
				overflow: hidden;
				overflow-y: auto;
				padding-right:10px;
			}
			.run-param-order{
				.note{
					margin-top: 20px;
					margin-bottom: 20px;
					color:#28B4FF;
					font-size: 14px;
				}
				.run-params-box{
					width: 100%;
					height: 80%;
					background: url(../img/run-params-box.png) left bottom no-repeat;
					background-size: 100% 100%;
				}

				li{
					border-bottom: 1px solid rgba(82, 82, 82, 0.2);
					height: 50px;
					display: flex;
					justify-content: space-between;
					padding:0 16px;
					align-items:center;
					.label{
						color:#28B4FF;
					}

					.value{
						opacity: 0.9;
						font-size: 14px;
					}
				}
			}
			.vehicle-list{
				padding-top:40px;
				position:relative;
			}
			.platfrom{
				width: 50%;
				display: flex;
				justify-content: flex-end;
				position:absolute;
				right: 0;
				top:0;
				z-index:9;
				background: #032493;
			}
			.img-box{
				width: 100%;
				height: 200px;
				background:#02090c;
				font-size: 30px;
				font-weight: 300;
				color:rgba(255,255,255,0.2);
				font-family: cursive;
				overflow: hidden;
				position:relative;
				img{
					width: 100%;
					height: 100%;
					cursor: pointer;
				}
			}
			.vehicle-config{
				height: 36px;
				color:rgba(255,255,255,0.7);
				.vehicle-idcard{
					padding-left: 26px;
					background: url(../img/icon-vehicle.png) left bottom no-repeat;
					background-size: 20px auto;
				}
			}
		}
	}

	.card-header{
		@include card-title;
	}

	.card-content{
		width: calc(100% - 20px);
		margin-left: 10px;
		height: calc(100% - 50px);
		padding:0 10px;
	}

	.main-video-box{
		width: 100%;
		height: 100%;
		background:#02090c;
		font-size: 40px;
		font-weight: 300;
		color:rgba(255,255,255,0.2);
		font-family: cursive;
		position: relative;

		img{
			width: 100%;
			height: 100%;
		}
	}
}